<template>
	<div class="history-data-management">
		<!-- 主内容区域 -->
		<div class="main-content">
			<!-- 搜索区域 -->
			<div class="search-section">
				<div class="search-form-capsule">
					<!-- 第一行：查询条件 -->
					<div class="capsule-row">
						<!-- 账号 -->
						<div class="capsule-item">
							<el-icon class="capsule-icon"><User /></el-icon>
							<span class="capsule-label">账号</span>
							<el-select 
								v-model="selectedAccount" 
								placeholder="全部" 
								class="capsule-input"
								:disabled="!isAdmin"
								@change="handleAccountChange"
							>
								<el-option v-if="isAdmin" label="全部" value="all" />
								<el-option
									v-if="isAdmin"
									v-for="(info, accountId) in accounts"
									:key="accountId"
									:label="`${accountId}${info.name ? ' - ' + info.name : ''}`"
									:value="accountId"
								/>
								<!-- 非管理员只显示当前用户 -->
								<el-option
									v-if="!isAdmin && currentAccountId"
									:label="`${currentAccountId}${accounts[currentAccountId]?.name ? ' - ' + accounts[currentAccountId].name : ''}`"
									:value="currentAccountId"
								/>
						</el-select>
			</div>
			
						<!-- 单据号 -->
						<div class="capsule-item">
							<el-icon class="capsule-icon"><Document /></el-icon>
							<span class="capsule-label">单据号</span>
							<el-input 
								v-model="searchForm.documentNumber" 
								clearable 
								placeholder="请输入单据号"
								class="capsule-input"
								@keyup.enter="handleSearch"
							/>
			</div>
			
						<!-- 推送时间 -->
						<div class="capsule-item">
							<el-icon class="capsule-icon"><Calendar /></el-icon>
							<span class="capsule-label">推送时间</span>
						<el-date-picker
								v-model="searchForm.dateRange"
								end-placeholder="结束时间"
								format="YYYY-MM-DD HH:mm:ss"
							range-separator="至"
								start-placeholder="开始时间"
								type="datetimerange"
								value-format="YYYY-MM-DD HH:mm:ss"
								class="capsule-input"
					/>
				</div>
			</div>
			
					<!-- 第二行：操作按钮 -->
					<div class="capsule-row">
						<!-- 仅未通过 + 布局切换 -->
						<div class="capsule-item capsule-button-group">
							<div class="button-group-item" @click.stop="toggleFailedFilter">
								<el-icon class="capsule-icon">
									<Close v-if="filterFailedOnly" />
									<Filter v-else />
								</el-icon>
								<span class="capsule-label">{{ filterFailedOnly ? '显示全部' : '仅未通过' }}</span>
				</div>
							<div class="button-group-divider"></div>
							<div class="button-group-item" @click.stop="toggleLayoutMode">
								<el-icon class="capsule-icon">
									<Grid v-if="layoutMode === 'expand'" />
									<Menu v-else />
								</el-icon>
								<span class="capsule-label">{{ layoutMode === 'expand' ? '展开布局' : '内联布局' }}</span>
				</div>
				</div>
			
						<!-- 搜索|重置 -->
						<div class="capsule-item capsule-action-group">
							<div 
								class="action-button" 
								:class="{ 'is-active': actionType === 'search' }"
								@click="handleSearch"
							>
								<el-icon class="action-icon"><Search /></el-icon>
								<span class="action-label">搜索</span>
				</div>
							<div 
								class="action-button" 
								:class="{ 'is-active': actionType === 'reset' }"
								@click="resetSearch"
							>
								<el-icon class="action-icon"><Refresh /></el-icon>
								<span class="action-label">重置</span>
				</div>
						</div>
						
						<!-- 校验项|详细错误 -->
						<div class="capsule-item capsule-radio">
							<el-radio-group v-model="activeTab" size="small">
								<el-radio-button label="summary">校验项</el-radio-button>
								<el-radio-button label="detailed">详细错误</el-radio-button>
							</el-radio-group>
								</div>
							</div>
						</div>
			</div>

			<!-- 数据展示区域 -->
			<div class="data-section">

				<div v-loading="loading" class="data-container">
					<div v-if="dataList.length === 0" class="empty-state">
						<el-empty description="暂无数据" />
					</div>
					<div v-else>
						<DocumentItem
							v-for="item in dataList"
							:key="`${item.单据号}_${item.推送时间}`"
							:active-tab="activeTab"
							:layout-mode="layoutMode"
							:item="item"
							@tab-change="handleTabChange"
						/>
					</div>
				</div>

				<!-- 分页 -->
				<div v-if="total > 0" class="pagination-container">
					<el-pagination
						v-model:current-page="currentPage"
						:page-size="10"
						:total="total"
						layout="total, prev, pager, next, jumper"
						@current-change="handleCurrentChange"
					/>
					</div>
				</div>
			</div>
	</div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { Calendar, Close, Document, Filter, Grid, Menu, Refresh, Search, User } from '@element-plus/icons-vue';
import DocumentItem from './components/DocumentItem.vue';
import { useHistoryDataApi } from '/@/api/historyData';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';

// 获取用户信息
const { userInfos } = storeToRefs(useUserInfo());
const isAdmin = computed(() => userInfos.value.is_superuser || false);
const currentUsername = computed(() => userInfos.value.username || '');
const currentDeptId = computed(() => userInfos.value.dept_info?.dept_id || null);

// 账号列表（从后端动态获取）
const accounts = ref<Record<string, { name?: string }>>({});

// 获取部门用户列表
const fetchDeptUsers = async () => {
	if (!isAdmin.value || !currentDeptId.value) {
		// 非管理员或没有部门信息，只显示当前用户
		if (currentUsername.value) {
			accounts.value = {
				[currentUsername.value]: { name: userInfos.value.name || currentUsername.value }
			};
		}
		return;
	}
	
	try {
		console.log('获取部门用户列表');
		
		const response = await historyDataApi.getDeptUsers();
		console.log('部门用户API响应:', response);
		
		if (response && response.code === 2000) {
			// 处理分页响应或直接数据响应
			let users: any[] = [];
			
			// 后端API返回格式：
			// 分页响应：{ code: 2000, msg: 'success', page: 1, limit: 10, total: 100, data: [...] }
			// 非分页响应：{ code: 2000, msg: '获取成功', data: [...] }
			if (Array.isArray(response.data)) {
				// data字段直接是数组
				users = response.data;
			} else if (response.data && typeof response.data === 'object') {
				// 可能是其他格式，尝试查找用户数组
				console.warn('未识别的响应格式:', response.data);
				users = [];
			}
			
			console.log('解析到的用户列表:', users);
			
			const accountsMap: Record<string, { name?: string }> = {};
			
			users.forEach((user: any) => {
				// 使用username作为key，如果有name则显示name
				const accountId = user.username || user.id?.toString();
				if (accountId) {
					accountsMap[accountId] = {
						name: user.name || user.username
					};
				}
			});
			
			accounts.value = accountsMap;
			
			if (Object.keys(accountsMap).length === 0) {
				console.warn('部门用户列表为空');
				// 如果列表为空，至少显示当前用户
				if (currentUsername.value) {
					accounts.value = {
						[currentUsername.value]: { name: userInfos.value.name || currentUsername.value }
					};
				}
			}
		} else {
			console.error('API返回错误:', response);
			ElMessage.error(response?.msg || '获取部门用户失败');
			// 失败时至少显示当前用户
			if (currentUsername.value) {
				accounts.value = {
					[currentUsername.value]: { name: userInfos.value.name || currentUsername.value }
				};
			}
		}
	} catch (error: any) {
		console.error('获取部门用户失败，详细错误:', error);
		console.error('错误响应:', error?.response);
		ElMessage.error(error?.response?.data?.msg || error?.message || '获取部门用户失败');
		// 失败时至少显示当前用户
		if (currentUsername.value) {
			accounts.value = {
				[currentUsername.value]: { name: userInfos.value.name || currentUsername.value }
			};
		}
	}
};

// 获取当前用户的账户ID
const currentAccountId = computed(() => {
	if (!currentUsername.value) return null;
	// 直接使用username作为账户ID
	return currentUsername.value;
});

// 响应式数据
const loading = ref(false);
const activeTab = ref('detailed');
const currentPage = ref(1);
const total = ref(0);
const dataList = ref<any[]>([]);
const selectedAccount = ref<string>('all');
const filterFailedOnly = ref(false);
const actionType = ref<'search' | 'reset' | null>(null);
const layoutMode = ref<'expand' | 'inline'>('inline');

// 监听用户信息变化，如果不是管理员，限制账户选择
watch([isAdmin, currentAccountId], ([admin, accountId]) => {
	if (!admin && accountId) {
		selectedAccount.value = accountId;
	}
}, { immediate: true });

const searchForm = reactive({
	documentNumber: '',
	dateRange: null as [string, string] | null
});

// API
const historyDataApi = useHistoryDataApi();

// 计算属性
const searchParams = computed(() => {
	const params: any = {
		page: currentPage.value,
		limit: 10
	};

	// 账号过滤逻辑
	if (selectedAccount.value) {
		if (selectedAccount.value === 'all') {
			// 选择"全部"时，传递部门所有成员的账号ID列表（用逗号分隔）
			const deptUserIds = Object.keys(accounts.value);
			if (deptUserIds.length > 0) {
				params.user_id = deptUserIds.join(',');
			}
		} else {
			// 选择具体账号时，只传递该账号ID
			params.user_id = selectedAccount.value;
		}
	}

	if (searchForm.documentNumber) {
		params.document_id = searchForm.documentNumber;
	}

	if (searchForm.dateRange && searchForm.dateRange.length === 2) {
		// 后端已经在 end_date 后面添加了 " 23:59:59"，所以前端只发送日期部分
		const startDate = searchForm.dateRange[0];
		const endDate = searchForm.dateRange[1];
		
		// 提取日期部分（YYYY-MM-DD），去掉时间部分
		if (startDate) {
			params.start_date = startDate.split(' ')[0];
		}
		if (endDate) {
			params.end_date = endDate.split(' ')[0];
		}
	}

	// 如果启用了仅显示未通过记录
	if (filterFailedOnly.value) {
		params.if_pass = 'false';
	}

	return params;
});

// 数据转换：将 API 返回的英文字段转换为中文字段
const transformData = (item: any) => {
	return {
		id: item.id, // 保留原始 id 用于删除操作
		单据号: item.code || item.document_id || '',
		推送时间: item.push_time || item.created_time || '',
		校验结果: transformValidationResult(item.val_result, item.if_pass),
		详细错误信息: item.error_msg || []
	};
};

// 处理校验结果
const transformValidationResult = (valResult: any, ifPass: boolean) => {
	// 如果 val_result 是 JSON 格式
	if (valResult && typeof valResult === 'object') {
		// 如果已经有 results 字段
		if (valResult.results) {
			const results = valResult.results;
			const itemNames = Object.keys(results);
			const failedItems = itemNames.map(name => {
				const itemResult = results[name];
				// 检查是否是数组格式 [success, message]
				if (Array.isArray(itemResult)) {
					return !itemResult[0]; // 第一个元素是成功状态
				}
				return !itemResult; // 直接是布尔值
			});

			return {
				all_passed: valResult.all_passed !== undefined ? valResult.all_passed : ifPass,
				item_names: valResult.item_names || itemNames,
				failed_items: valResult.failed_items || failedItems,
				results: results
			};
		}
		// 如果已经是格式化后的格式
		return valResult;
	}

	// 默认返回
	return {
		all_passed: ifPass || false,
		item_names: [],
		failed_items: [],
		results: {}
	};
};

// 方法
const loadData = async () => {
	loading.value = true;
	try {
		const params = {
			...searchParams.value
		};
		
		// 确保使用正确的分页参数
		params.page = currentPage.value;
		params.limit = 10;
		
		const response = await historyDataApi.getHistoryData(params);
		if (response && response.code === 2000) {
			if (response.data && response.data.results) {
				// 转换数据格式
				dataList.value = response.data.results.map((item: any) => transformData(item));
				total.value = response.data.pagination?.total_count || 0;
			} else {
				dataList.value = [];
				total.value = 0;
			}
		} else {
			ElMessage.error(response?.msg || '加载数据失败');
			dataList.value = [];
			total.value = 0;
		}
	} catch (error) {
		console.error('加载数据失败:', error);
		ElMessage.error('加载数据失败');
	} finally {
		loading.value = false;
	}
};

const handleAccountChange = () => {
	currentPage.value = 1;
	loadData();
};

const handleSearch = () => {
	actionType.value = 'search';
	currentPage.value = 1;
	loadData();
};

const toggleFailedFilter = () => {
	filterFailedOnly.value = !filterFailedOnly.value;
	currentPage.value = 1;
	loadData();
};

const toggleLayoutMode = () => {
	layoutMode.value = layoutMode.value === 'expand' ? 'inline' : 'expand';
};

const resetSearch = () => {
	actionType.value = 'reset';
	// 管理员可以重置为"全部"，普通用户保持为当前用户账户ID
	if (isAdmin.value) {
		selectedAccount.value = 'all';
	} else {
		selectedAccount.value = currentAccountId.value || '';
	}
	searchForm.documentNumber = '';
	searchForm.dateRange = null;
	filterFailedOnly.value = false;
	currentPage.value = 1;
	loadData();
};

const switchTab = (tab: string) => {
	activeTab.value = tab;
	// radio-group 的 change 事件直接传递 label 值
};

const handleTabChange = (tab: string) => {
	activeTab.value = tab;
};

const handleCurrentChange = (page: number) => {
	currentPage.value = page;
	loadData();
};

// 生命周期
onMounted(async () => {
	// 获取部门用户列表
	await fetchDeptUsers();
	
	// 如果不是管理员，确保账户限制为当前用户的账户ID
	if (!isAdmin.value && currentAccountId.value) {
		selectedAccount.value = currentAccountId.value;
	}
	// 页面加载时自动加载数据
	loadData();
});

// 监听部门变化，重新获取用户列表
watch([isAdmin, currentDeptId], async () => {
	await fetchDeptUsers();
});
</script>

<style scoped>
.history-data-management {
	padding: 20px 24px;
	max-width: 1600px;
	margin: 0 auto;
	background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);
	min-height: 100vh;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'kern' 1;
	text-rendering: optimizeLegibility;
}

.history-data-management::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);
	z-index: -1;
}

/* 主内容区域 - 极简毛玻璃风格 */
.main-content {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.7);
	animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
	letter-spacing: -0.01em;
}

.search-section {
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border-radius: 20px;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.04);
}

/* 胶囊式搜索表单 */
.search-form-capsule {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* 胶囊行 - 每行使用相同的3列网格布局 */
.capsule-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	align-items: stretch;
}

/* 确保每个胶囊项都占满网格单元格 */
.capsule-item {
	min-width: 0;
	width: 100%;
}

/* 统一的胶囊项 */
.capsule-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(139, 149, 167, 0.15);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
	height: 40px;
	width: 100%;
	box-sizing: border-box;
	flex-shrink: 0;
}

.capsule-item:hover {
	background: rgba(255, 255, 255, 0.85);
	border-color: rgba(107, 124, 150, 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.capsule-icon {
	font-size: 16px;
	color: #8b95a7;
	opacity: 0.8;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	width: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.capsule-item:hover .capsule-icon {
	color: #6b7c96;
	opacity: 1;
}

.capsule-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #4a5568;
	white-space: nowrap;
	letter-spacing: -0.01em;
	font-feature-settings: 'kern' 1;
	flex-shrink: 0;
	width: 56px;
	text-align: left;
}

/* 输入框和选择器样式 */
.capsule-input {
	width: auto;
	min-width: 100px;
	flex: 1;
	flex-shrink: 0;
}

.capsule-input :deep(.el-input__wrapper) {
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	min-height: auto;
}

.capsule-input :deep(.el-input__inner) {
	padding: 0;
	font-size: 0.875rem;
	color: #4a5568;
	height: auto;
	line-height: 1.5;
	width: 100%;
	min-width: 100px;
}

.capsule-input :deep(.el-input__wrapper:hover),
.capsule-input :deep(.el-input__wrapper.is-focus) {
	background: transparent;
	border: none;
	box-shadow: none;
}

.capsule-input :deep(.el-select__wrapper) {
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	width: 100%;
	min-width: 100px;
}

.capsule-input :deep(.el-select) {
	width: 100%;
	min-width: 100px;
}

.capsule-input :deep(.el-select__placeholder) {
	color: #8b95a7;
	font-size: 0.875rem;
}

.capsule-input :deep(.el-date-editor) {
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
	width: 100%;
}

.capsule-input :deep(.el-date-editor .el-input__wrapper) {
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.capsule-input :deep(.el-date-editor input) {
	padding: 0;
	font-size: 0.875rem;
	color: #4a5568;
	width: 100%;
	min-width: 180px;
}

.capsule-input :deep(.el-date-editor .el-range-separator) {
	color: #8b95a7;
	padding: 0 4px;
}

/* 按钮组样式（仅未通过 + 布局切换） */
.capsule-button-group {
	padding: 6px;
	display: flex;
	gap: 0;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
}

.button-group-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 12px;
	cursor: pointer;
	user-select: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 16px;
	height: 100%;
}

.button-group-item:hover {
	background: rgba(107, 124, 150, 0.08);
}

.button-group-divider {
	width: 1px;
	height: 24px;
	background: rgba(139, 149, 167, 0.2);
	margin: 0 4px;
	flex-shrink: 0;
}

.button-group-item .capsule-icon {
	font-size: 16px;
	color: #8b95a7;
	opacity: 0.8;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}

.button-group-item:hover .capsule-icon {
	color: #6b7c96;
	opacity: 1;
}

.button-group-item .capsule-label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #6b7c96;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* 按钮式胶囊 */
.capsule-button {
	cursor: pointer;
	user-select: none;
}

.capsule-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.capsule-button.capsule-primary {
	background: rgba(107, 124, 150, 0.8);
	border-color: rgba(107, 124, 150, 0.25);
	color: #ffffff;
}

.capsule-button.capsule-primary .capsule-icon,
.capsule-button.capsule-primary .capsule-label {
	color: #ffffff;
}

.capsule-button.capsule-primary:hover {
	background: rgba(107, 124, 150, 0.9);
	border-color: rgba(107, 124, 150, 0.35);
	box-shadow: 0 6px 20px rgba(107, 124, 150, 0.18);
}

/* 统一的按钮组样式（搜索|重置 和 校验项|详细错误） */
.capsule-action-group,
.capsule-radio {
	padding: 6px;
	display: flex;
	gap: 0;
	align-items: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
	/* 确保外层的 .capsule-item 的边框显示 */
	margin: 0;
}

.capsule-radio :deep(.el-radio-group) {
	display: flex;
	gap: 0;
	width: 100%;
	height: 100%;
}

.capsule-radio :deep(.el-radio-button) {
	margin: 0;
	flex: 1;
	height: 100%;
}

.capsule-radio :deep(.el-radio-button__inner) {
	border-radius: 16px;
	font-size: 0.8125rem;
	padding: 6px 16px;
	font-weight: 500;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	background: transparent;
	backdrop-filter: none;
	letter-spacing: -0.01em;
	line-height: 1.4;
	font-feature-settings: 'kern' 1;
	color: #6b7c96;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.capsule-radio :deep(.el-radio-button:first-child .el-radio-button__inner) {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.capsule-radio :deep(.el-radio-button:last-child .el-radio-button__inner) {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.capsule-radio :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
	background: rgba(107, 124, 150, 0.85);
	backdrop-filter: blur(10px);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(107, 124, 150, 0.2);
	font-weight: 600;
}

.capsule-radio :deep(.el-radio-button__inner:hover) {
	color: #6b7c96;
	background: rgba(107, 124, 150, 0.08);
}

/* 搜索|重置按钮组 - 统一设计 */
.action-button {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 16px;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	background: transparent;
	backdrop-filter: none;
	letter-spacing: -0.01em;
	line-height: 1.4;
	font-feature-settings: 'kern' 1;
	color: #6b7c96;
	height: 100%;
}

.action-button:first-child {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.action-button:last-child {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.action-button:hover {
	color: #6b7c96;
	background: rgba(107, 124, 150, 0.08);
}

.action-button.is-active {
	background: rgba(107, 124, 150, 0.85);
	backdrop-filter: blur(10px);
	border-color: transparent;
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(107, 124, 150, 0.2);
	font-weight: 600;
}

.action-icon {
	font-size: 14px;
	color: inherit;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-label {
	font-size: inherit;
	color: inherit;
	white-space: nowrap;
}

.data-section {
	margin-bottom: 20px;
}

.data-section-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: #4a5568;
	margin-bottom: 16px;
	letter-spacing: -0.02em;
}

.tab-buttons {
	display: flex;
	gap: 0;
	background: #f8f9fa;
	padding: 4px;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	width: 100%;
}

.tab-buttons :deep(.el-button) {
	border-radius: 8px;
	border: none;
	padding: 8px 16px;
	font-weight: 500;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-buttons :deep(.el-button--primary) {
	background: #ffffff;
	color: #007aff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-buttons :deep(.el-button:not(.el-button--primary)) {
	background: transparent;
	color: #86868b;
}

.tab-buttons :deep(.el-button:not(.el-button--primary):hover) {
	color: #1d1d1f;
	background: rgba(0, 0, 0, 0.04);
}

.data-container {
	min-height: 200px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	border-radius: 20px;
	padding: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #9ca3af;
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
	line-height: 1.6;
	font-weight: 400;
	font-feature-settings: 'kern' 1;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	padding: 16px 0;
}

/* Element Plus 组件样式覆盖 - 极简毛玻璃风格 */
:deep(.el-button) {
	border-radius: 12px;
	font-weight: 500;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	font-family: inherit;
	letter-spacing: -0.01em;
	line-height: 1.4;
	font-feature-settings: 'kern' 1;
}

:deep(.el-button--primary) {
	background: rgba(107, 124, 150, 0.8);
	backdrop-filter: blur(10px);
	border-color: rgba(107, 124, 150, 0.25);
	color: #ffffff;
}

:deep(.el-button--primary:hover) {
	background: rgba(107, 124, 150, 0.9);
	border-color: rgba(107, 124, 150, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(107, 124, 150, 0.18);
}

:deep(.el-button--success) {
	background: rgba(72, 187, 120, 0.8);
	border-color: rgba(72, 187, 120, 0.25);
	color: #ffffff;
}

:deep(.el-button--success:hover) {
	background: rgba(72, 187, 120, 0.9);
	border-color: rgba(72, 187, 120, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(72, 187, 120, 0.2);
}

:deep(.el-button--danger) {
	background: rgba(225, 77, 89, 0.8);
	border-color: rgba(225, 77, 89, 0.25);
	color: #ffffff;
}

:deep(.el-button--danger:hover) {
	background: rgba(225, 77, 89, 0.9);
	border-color: rgba(225, 77, 89, 0.35);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(225, 77, 89, 0.2);
}

:deep(.el-input__wrapper) {
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
}

/* 胶囊内的输入框和选择器不显示背景 */
.capsule-item :deep(.el-input__wrapper),
.capsule-item :deep(.el-select__wrapper),
.capsule-item :deep(.el-date-editor .el-input__wrapper) {
	background: transparent !important;
	backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

.capsule-item :deep(.el-input__wrapper:hover),
.capsule-item :deep(.el-input__wrapper.is-focus),
.capsule-item :deep(.el-select__wrapper:hover),
.capsule-item :deep(.el-select__wrapper.is-focus),
.capsule-item :deep(.el-date-editor .el-input__wrapper:hover),
.capsule-item :deep(.el-date-editor .el-input__wrapper.is-focus) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

:deep(.el-input__inner),
:deep(.el-input__wrapper input) {
	font-family: inherit;
	letter-spacing: -0.01em;
	line-height: 1.5;
	font-feature-settings: 'kern' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:deep(.el-input__wrapper:hover) {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(107, 124, 150, 0.2);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

:deep(.el-input__wrapper.is-focus) {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(107, 124, 150, 0.3);
	box-shadow: 0 0 0 3px rgba(107, 124, 150, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
}

:deep(.el-select .el-input__wrapper) {
	border-radius: 10px;
}

:deep(.el-select .el-input__inner),
:deep(.el-select input) {
	font-family: inherit;
	letter-spacing: -0.01em;
	line-height: 1.5;
	font-feature-settings: 'kern' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:deep(.el-date-editor) {
	border-radius: 10px;
}

:deep(.el-date-editor .el-input__wrapper) {
	border-radius: 10px;
}

:deep(.el-date-editor input) {
	font-family: inherit;
	letter-spacing: -0.01em;
	line-height: 1.5;
	font-feature-settings: 'kern' 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:deep(.el-pagination) {
	--el-pagination-button-bg-color: rgba(255, 255, 255, 0.7);
	--el-pagination-hover-color: rgba(107, 124, 150, 0.8);
	--el-pagination-active-color: rgba(107, 124, 150, 0.85);
	font-family: inherit;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next),
:deep(.el-pagination .el-pagination__sizes),
:deep(.el-pagination .el-pagination__jump),
:deep(.el-pagination .el-pagination__total) {
	font-family: inherit;
	letter-spacing: -0.01em;
	font-feature-settings: 'kern' 1;
}

:deep(.el-pagination .el-pager li) {
	border-radius: 10px;
	margin: 0 6px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: inherit;
	letter-spacing: -0.01em;
	font-feature-settings: 'kern' 1;
}

:deep(.el-pagination .el-pager li:hover) {
	background: rgba(255, 255, 255, 0.8);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:deep(.el-pagination .el-pager li.is-active) {
	background: rgba(107, 124, 150, 0.85);
	backdrop-filter: blur(10px);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(107, 124, 150, 0.2);
}

:deep(.el-checkbox) {
	--el-checkbox-checked-bg-color: rgba(107, 124, 150, 0.8);
	--el-checkbox-checked-border-color: rgba(107, 124, 150, 0.8);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 768px) {
	.history-data-management {
		padding: 12px 16px;
	}

	.main-content {
		padding: 16px;
	}

	.search-section {
		padding: 16px;
		margin-bottom: 16px;
	}

	.search-form-capsule {
		flex-direction: column;
		align-items: stretch;
	}

	.capsule-item {
		width: 100%;
		justify-content: flex-start;
	}

	.capsule-input {
		min-width: auto;
		flex: 1;
	}

	.capsule-input :deep(.el-date-editor input) {
		min-width: auto;
		width: 100%;
	}
}
</style>
